<template>
  <div class="search-page">
    <div class="search-bar">
      <img src="../assets/img/返回(1)@2x.png" alt="" @click="goBack">
      <van-search class="head_search_bar" v-model="value" show-action @search="onSearch">
        <template #action>
          <div @click="onSearch(value)">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="filter-bar">
      <van-dropdown-menu active-color="#4CC79B">
        <van-dropdown-item v-model="select.city" :title="select.city" ref="cityitem">
          <van-tree-select
            v-model:active-id="select.activeId"
            v-model:main-active-index="select.activeIndex"
            :items="citys"
            @click-item="selectCity(citys[select.activeIndex])"
          />
        </van-dropdown-item>
        <van-dropdown-item v-model="select.sort" :options="optionSort" />
        <van-dropdown-item title="筛选" ref="item" >
          <div class="sizer-item">
            <p>认证</p>
            <span>实名认证</span><span>企业认证</span>
          </div>
          <div class="sizer-item">
            <p>价格</p>
            <div class="price-input">
              <van-field v-model="select.price1" type="number" placeholder="请输入最低价" />
              <b></b>
              <van-field v-model="select.price1" type="number" placeholder="请输入最低价" />
            </div>
          </div>
          <van-checkbox-group v-model="checked">
            <van-cell-group>
              <van-cell clickable title="包运费">
                <template #right-icon>
                  <van-checkbox checked-color="#4CC79B"/>
                </template>
              </van-cell>
              <van-cell clickable title="支持零售">
                <template #right-icon>
                  <van-checkbox checked-color="#4CC79B"/>
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
          <div style="padding: 10px 50px;">
            <van-button type="success" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <section>
      <ul class="providerList" v-if="providerList.length > 0">
        <li v-for="item in providerList" :key="item.id" @click="gotoDetail(item.id)">
          <p>{{ item.providername ? item.providername : "供应商名字" }}</p>
          <van-card
            :price="item.unitPrice"
            :desc="`${parseInt(Math.sqrt(Math.pow(item.location[0],2)+Math.pow(item.location[1],2)))}km  ${item.production}`"
            :title="item.title"
            :thumb="item.imgUrl[0]"
          />
        </li>
      </ul>
      <div class="empty" v-else>
        <img src="../assets/img/矢量智能对象@2x.png" alt="">
        <p>没有找到符合条件的结果</p>
      </div>
    </section>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  setup(){
    const router = useRouter();
    const store = useStore();

    let value = ref('');
    const goBack = () => router.go(-1);


    const providerList = computed(() => store.state.classic.providerList);
    const onSearch = (val) => {
      store.dispatch("classic/onSearch", val);
    };
    // value = computed(() => store.state.classic.quickSearchValue);

    onMounted(() => {
      value.value = store.state.classic.quickSearchValue ? store.state.classic.quickSearchValue : ''
    })

    const gotoDetail = (id) => {
      router.push("/detail/" + id);
    }

    const select = reactive({
      city: "全国",
      sort: 0,
      activeId: 1,
      activeIndex: 0,
      price1:'',
      price2:'',
    });
    const citys = [
      {
        text: '全国', value: "全国",
      },
      {
        text: '浙江',
        children: [
          { text: '杭州', id: 1 },
          { text: '温州', id: 2 },
        ],
      },
      {
        text: '江苏',
        children: [
          { text: '南京', id: 5 },
          { text: '无锡', id: 6 },
        ],
      },
    ];
    const optionSort = [
      { text: '综合排序', value: 0 },
      { text: '距离排序', value: 1 },
      { text: '价格排序', value: 2 },
    ];

    const item = ref(null);
    const onConfirm = () => {
      item.value.toggle();
    };

    let cityitem = ref(null);
    const selectCity = (data) => {
      console.log(data);
      if(data.children) {
        data.children.forEach(items => {
          if(items.id === select.activeId) {
            select.city = items.text;
            cityitem.value.toggle();
            console.log(select.city);
          }
        });
      }else {
        select.city = data.text;
        console.log(select.city);
      }
    }

    const checked = ref(['a', 'b']);

    return { value, onSearch, goBack, select, citys, optionSort, onConfirm, selectCity, cityitem, checked, providerList, item, gotoDetail };
  }
};
</script>
<style lang="scss" scoped>
.search-page {
  background: #fff;
  height: 667px;
}
.search-bar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #D8D8D8;

  img {
    width: 9px;
    height: 16px;
    margin-right: 16px;
  }

  .head_search_bar {
    flex: 1;
  }
}

.sizer-item {
  border-bottom: 1px solid #D8D8D8;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  padding: 10px 40px;

  p {
    margin-bottom: 10px;
  }

  span {
    background: #F2F2F2;
    border-radius: 16px;
    display: inline-block;
    margin-right: 50px;
    padding: 3px 12px;
  }

  .price-input {
    display: flex;
    align-items: center;
  }

  b {
    display: inline-block;
    width: 15px;
    height: 1px;
    background: #333333;
    margin: 0 15px;
  }
}

.providerList {
  padding: 0 16px;

  li {
    background: #FFFFFF;
    box-shadow: 1px 12px 37px 3px rgba(72, 72, 72, 0.07);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;

    p {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
      margin-bottom: 9px;
    }

    .van-card {
      background: #FFFFFF;
      margin: 0;
      padding: 0;
    }
  }
}

.empty {
  width: 100%;
  text-align: center;
  padding-top: 213.5px;

  img {
    width: 100%;
  }
  p {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #4CC79B;
    line-height: 20px;
  }
}


</style>